import { useEffect } from 'react';
import { useSelector } from 'react-redux';

const useStores = () => {
    const store = useSelector((state: any) => state.setting);
    const {
        color_gray,
        color_primary,
        color_weak,
        layout,
        show_breadcrumb,
        show_breadcrumb_icon,
        show_footer,
        show_logo,
        show_multi_tab,
        show_top_progress,
        show_watermark,
        themes
    } = store;

    useEffect(() => {
        changeBodyClass(color_weak, "color-weak")
        changeBodyClass(color_gray, "color-gray")
    }, [store])

    // 改变body样式
    const changeBodyClass = (t: boolean, classname: string) => {
        t ? document.body.classList.add(classname) : document.body.classList.remove(classname)
    }

    return {
        color_gray,
        color_primary,
        color_weak,
        layout,
        show_breadcrumb,
        show_breadcrumb_icon,
        show_footer,
        show_logo,
        show_multi_tab,
        show_top_progress,
        show_watermark,
        themes
    }
}

export default useStores;